<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../../css/mui.min.css" //>
		<link rel="stylesheet" type="text/css" href="../../css/app.css" />
		<link rel="stylesheet" type="text/css" href="../../css/appOther.css" />
		<style type="text/css">
			.mui-pull-left {
				color: #FFFFFF;
				line-height: 44px;
			}
			
			.mui-pull-right {
				color: #FFFFFF;
				line-height: 44px;
			}
			
			.mui-title {
				color: #FFFFFF;
			}
			
			.mui-icon.iconfont {
				font-size: 18px;
			}
			
			nav .mui-icon {
				left: 50%;
				margin-left: -12px;
			}
			
			.mui-bar.mui-bar-nav {
				background: #0072dc;
			}
			
			.mui-control-item.text_submain {
				line-height: 32px;
			}
	    	.comment_content img{
	    		width: auto !important;
	    		height: auto !important;
	    		max-width: 100%;
	    	}
		</style>
	</head>

	<body id='app'>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-pull-left">
				<i class="mui-icon iconfont">&#xe62f;</i>
				<span class="text_submain" style="vertical-align: 2px;">返回</span>
			</a>
			<h1 class="mui-title" id="title">
				<span class="text_hid">{{answerInfo.UserName}}的评论</span>
			</h1>
			<a @tap='addComment()' class="mui-pull-right">
				<i class="mui-icon iconfont">&#xe678;</i>
			</a>
		</header>
		<div class="mui-content bg_gray">
			<div class="mui-table-view-cell bg_white" url=''>
				<div class="card-topic_header" style="padding-bottom:8px;border-bottom: 1px solid #E7E7E7;">
					<i class="mui-pull-left mui-icon iconfont i_label_big" style="color: #666666;;margin-right: 5px;">&#xe61c;</i>
					<i class="praise fr" style="margin-right: 8px;">
						<i @tap='like' class="iconfont" :style="answerInfo.likeStatus==0?''：'color: #0072dc;'">&#xe629;</i>
					<span>{{answerInfo.LikeCount}}</span>
					</i>
					<p><span class="text_main card_username">{{answerInfo.UserName}}</span></p>
					<!--<p><span class="text_submain card_usernote">{{answerInfo.UserPosition}}</span></p>-->

				</div>
				<div class="card-topic_content" style="margin-top:2px;">
					<div class="comment_content">
						<p class="text_main">{{{answerInfo.Content}}}
						</p>
					</div>
				</div>
				<i class="date fr" style="margin-right: 8px;">
					<span>{{answerInfo.Date}}</span>
				</i>
			</div>
		</div>

		<div id="srollWrapper" class="mui-scroll-wrapper">
			<div id="scroll" class="mui-scroll">
				<ul id="container" class="mui-table-view app-hide">
					<li @tap="addComment(comment.UserID, comment.UserName)" v-for="comment in comments" class="mui-table-view-cell">
						<div class="card-topic_header">
							<i class="mui-pull-left mui-icon iconfont i_label_little" style="color: #666666;line-height: 25px;margin-right: 5px;">&#xe61c;</i>
							<i class="date fr" style="margin-right: 8px;">
									<span>{{comment.Date}}</span>
								</i>
							<p><span class="text_main card_username">{{comment.UserName}}</span>
								<span class="text_main">回复了 {{comment.ReplyName}}</span>
							</p>

						</div>
						<div class="card-topic_content" style="margin-top:2px;">
							<div class="card-topic-title">
								<p class="text_main">{{comment.Content}}
								</p>
							</div>
						</div>
					</li>
				</ul>
			</div>
		</div>

		<script src="../../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/mui-extend.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/mui.pullToRefresh.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/mui.pullToRefresh.material.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/app.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" charset="UTF-8">
			var vm = new Vue({
				el: '#app',
				data: {
					aid: '',
					answerInfo: {},
					comments: [],
					scrollComment: {},
					paramObj: {
						PageSize: 6,
						CurPage: 1,
					}
				},
				ready: function() {
					var me = this;
					$('#app .app-hide').show();
					mui.init();
					me.scrollComment = ui.setPullToRefresh(this.getComment);
					mui.plusReady(function() {
						me.getAnswerInfo();
						me.getComment(true);
					})
					document.addEventListener('reloadComments',function () {
						me.getComment(true);
					})
				},
				methods: {
					addComment: function(userID, userName){
						openPage('addComment.html','addComment',{aid: this.aid, replyUserID:userID, replyUserName:userName});
					},
					like: function(e){
						e.stopPropagation();
						e.preventDefault();
						var me = this;
						if(me.answerInfo.likeStatus==0){
							ajax.post(api.circle.likeAnswer,{ID: this.aid},function () {
								me.answerInfo.LikeCount++;	
								me.answerInfo.likeStatus = 1;
							},false);
						}else if(me.answerInfo.likeStatus==1){
							ajax.post(api.circle.unlikeAnswer,{ID: this.aid},function () {
								me.answerInfo.LikeCount--;	
								me.answerInfo.likeStatus = 0;
							},false);
						}
					},
					getAnswerInfo: function() {
						var me = this;
						var current = plus.webview.currentWebview();
						me.aid = current.aid;
						if(!me.aid) {
							alert('aid 为空')
							return;
						}
						ajax.post(api.topic.getAnswerDetail, {
							ID: me.aid
						}, function(data) {
							me.answerInfo = data.Data;
							me.$nextTick(function () {
								setTimeout(function () {
									ui.fixScroll();
								},500)
							})
						}, false, function() {
							showPage(current);
						})
					},
					getComment: function(isRefresh) {
						var me = this;
						var nomore = false;
						me.paramObj.CurPage = isRefresh ? 1 : me.paramObj.CurPage + 1;
						ajax.post(api.topic.getCommentList, {
							ID: me.aid,
							PageSize: me.paramObj.PageSize,
							CurPage: me.paramObj.CurPage,
						}, function(data) {
							me.comments = isRefresh ? data.Data : me.comments.concat(data.Data);
							nomore = data.Data.length < me.paramObj.PageSize;
						}, false, function() {
							ui.clearScrollAnimal(me.scrollComment.puller, isRefresh, nomore);
						});
					}
				}
			})
		</script>
	</body>

</html>